<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'HeatMap',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            const cityList = [
                { city: '济南', lon: 117, lat: 36.65, count: 920 },
                { city: '青岛', lon: 120.33, lat: 36.07, count: 1007 },
                { city: '淄博', lon: 118.05, lat: 36.78, count: 470 },
                { city: '枣庄', lon: 117.57, lat: 34.86, count: 385 },
                { city: '东营', lon: 118.49, lat: 37.46, count: 220 },
                { city: '烟台', lon: 121.39, lat: 37.52, count: 710 },
                { city: '潍坊', lon: 119.1, lat: 36.62, count: 938 },
                { city: '济宁', lon: 116.59, lat: 35.38, count: 835 },
                { city: '泰安', lon: 117.13, lat: 36.18, count: 547 },
                { city: '威海', lon: 122.1, lat: 37.5, count: 290 },
                { city: '日照', lon: 119.46, lat: 35.42, count: 296 },
                { city: '滨州', lon: 118.03, lat: 37.36, count: 392 },
                { city: '德州', lon: 116.29, lat: 37.45, count: 561 },
                { city: '聊城', lon: 115.97, lat: 36.45, count: 595 },
                { city: '临沂', lon: 118.35, lat: 35.05, count: 1101 },
                { city: '菏泽', lon: 115.43, lat: 35.24, count: 879 },
                { city: '莱芜', lon: 117.67, lat: 36.19, count: 100 }
            ]

            let points = cityList.map(i => {
                return { x: i.lon, y: i.lat, value: i.count }
            })
            let cesiumHeatmap = window.CesiumHeatmap.create(
                window.viewer,
                {
                    west: 116.1214, south: 34.2200, east: 122.9743, north: 38.0897
                },
                {
                    radius: 300,
                    maxOpacity: 1,
                    minOpacity: 0,
                    blur: 1
                }
            )
            cesiumHeatmap.setWGS84Data(0, 1200, points);
            window.viewer.flyTo(cesiumHeatmap._layer)
            setTimeout(()=>{
                cesiumHeatmap.show(false)
            },10000)

        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  